<!--  -->
<template>
  <div class="mask" >
    <!-- v-if="isNew" -->
    <div class="version-dailog">
      <div class="main">
        <div class="title webfontB">
          新版本抢险体验
          <span>NEW</span>
        </div>
        <p class="tips">
          版本更新啦！升级后体验更顺畅哦！<br/>
          立即更新
        </p>
        <div class="btn-group" v-if='!updateing'>
          <div class="btn" @click="isNew=false">
            稍后说明
          </div>
          <div class="btn" @click="update">
            立即更新
          </div>
        </div>
        <!-- //进度条 -->
        <div class="progress" v-else>
          <div class="progress-inner" :style="{width:progress}"></div>
        </div>
      </div>
      <div class="close">
        <image src="./close.png" mode='widthFix'></image>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "version-upgrade",
  data () {
    return {
      updateing:false,
      isNew:false,
      downloadUrl:'',
      downloadedSize:0,
      totalSize:541,
      progress:0
    };
  },
  mounted () {
    this.demo()
    // http.get(version) // 获取版本号
    //   .then(e => {
    //     if (e.version !== versionNum) {
    //       this.isNew = true;
    //       this.downloadUrl = e.appUrl;
    //       uni.hideTabBar({
    //         animation: false,
    //       });
    //     }
    //   });
  },

  components: {},

  computed: {},

  methods: {
    update(){
      this.updateing=true
      this.demo()
      //  var task=plus.downloader.createDownload(this.downloadUrl, {}, 
      //  function(d, status){
		  //   // // 下载完成
      //   //   if(status == 200){ 
      //   //     console.log("Download success: " + d.filename);
      //   //   } else {
      //   //     console.log("Download failed: " + status); 
      //   //   }  
      //     task.addEventListener("statechanged", this.onStateChanged, false);
      //  }
      // )
  },
  onStateChanged(download, status){
     this.downloadedSize=document.downloadedSize
     this.totalSize=document.totalSize

  },
  demo(){
    // for (let index = 0; index < this.totalSize; index++) {
    //   // this.downloadedSize=index*10
    // }
    let index=0
    setInterval(()=>{
      if(index<this.totalSize){
        index+=6
        this.downloadedSize=index
        this.progress=((this.downloadedSize / this.totalSize) * 100)+'%'
      }
    },1000)
  }
}
}
</script>
<style lang='scss' scoped>
$btn-color:#664fea;
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: $zIndex-999;
  background: rgba(0, 0, 0, 0.65);
  .version-dailog {
    width: 477rpx;
    height: 780rpx;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: $zIndex-1000;
    background: transparent;
    .main {
      padding: 290rpx 30rpx 0;
      width: 100%;
      height: 685rpx;
      background: url('./version.png');
      background-size: 100% 100%;
      .title {
        margin-bottom: 25rpx;
        color: #2d2a2b;
        font-size: 40rpx;
        font-weight: bolder;
        span {
          margin-left: 15rpx;
          padding: 5rpx 10rpx;
          font-size: 16rpx;
          color: #fff;
          background-image: $btn-color;
          border-radius: 16rpx;
          border-bottom-left-radius: 0 !important;
        }
      }
      .tips{
        line-height: 2;
        font-size: 27rpx;
        text-align: center;
        color: #4d4b4c;
      }
      .btn-group{
        margin-top: 45rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .btn{
          width: 188rpx;
          height: 64rpx;
          font-size: 24rpx;
          text-align: center;
          line-height: 64rpx;
          border-radius: 40rpx;
          &:first-child{
            border:1rpx solid $btn-color;
            color: $btn-color;
          }
           &:last-child{
            color: #fff;
            border:1rpx solid transparent;
            background: $btn-color;
          }
        }
      }
    }
    .close {
      margin-top: 20rpx;
      text-align: center;
      image {
        width: 45rpx;
      }
    }
  }
}
.progress{
  margin-top: 50rpx;
  width: 100%;
  height: 48rpx;
  // background: $btn-color;
  border-radius: 25rpx;
  background: #ddd;
  position: relative;
  overflow: hidden;
  .progress-inner{
    // width: 10rpx;
    position: absolute;
    top:0;
    left:0;
    bottom: 0;
    border-radius: 25rpx;
    background-image:linear-gradient(to right,	rgb(207, 125, 206),
				#664fea);
  
  }
}
</style>